<script setup>
import {onMounted, ref} from "vue";
import {useForm, usePage} from "@inertiajs/vue3";
import {route} from "ziggy-js";
import {Message} from "@arco-design/web-vue";
import AppPage from "@/components/admin/layouts/AppPage.vue";

defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
})

const title = '公众号配置 - 公众号 - 设置'
const breadcrumbs = ref(['设置', '公众号', '公众号配置'])

const page = usePage()

const form = useForm({
    id: 0,
    app_id: '',
    secret: '',
    token: '',
    aes_key: '',
    app_callback_url: '',
    use_stable_access_token: false,
})

const rules = ref({
    app_id: [{required: true, message: '请输入app_id', trigger: 'blur'}],
    secret: [{required: true, message: '请输入secret', trigger: 'blur'}],
    token: [{required: true, message: '请输入token', trigger: 'blur'}],
    app_callback_url: [{required: true, message: '请输入app_callback_url', trigger: 'blur'}],
    use_stable_access_token: [{required: true, message: '请输入use_stable_access_token', trigger: 'blur'}],
})
const FormRef = ref()
const handleSubmit = async () => {
    try {
        await FormRef.value.validate()
        form.post(route('admin.setting.wechat.configs.update'), {
            onSuccess: () => {
                Message.success('保存成功')
            },
            onError: (errors) => {
                console.log(errors)
                const fields = {};
                // 遍历所有错误
                for (const [fieldName, messages] of Object.entries(errors)) {
                    // 构造字段对象
                    fields[fieldName] = {
                        status: 'error',
                        message: messages
                    };
                    FormRef.value.scrollToField(fieldName)
                }
                FormRef.value.setFields(fields);
            }
        })
    } catch (error) {
        console.log(error)
    }
}

onMounted(() => {
    Object.assign(form, page.props.data)
})
</script>

<template>
    <app-page :breadcrumbs :title>
        <a-card :style="{ borderRadius: '8px'}" class="custom-card" title="公众号配置">
            <a-form
                ref="FormRef"
                :label-col-props="{ span: 6 }"
                :model="form"
                :rules="rules"
                :wrapper-col-props="{ span: 12 }"
                auto-label-width
                layout="horizontal"
                @submit="handleSubmit"
            >
                <a-form-item field="app_id" label="应用ID">
                    <a-input
                        v-model.trim="form.app_id"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入应用ID"
                    />
                </a-form-item>

                <a-form-item field="secret" label="应用密钥">
                    <a-input
                        v-model.trim="form.secret"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入应用密钥"
                    />
                </a-form-item>

                <a-form-item field="token" label="令牌">
                    <a-input
                        v-model.trim="form.token"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入令牌"
                    />
                </a-form-item>

                <a-form-item field="aes_key" label="AES密钥">
                    <a-input
                        v-model.trim="form.aes_key"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入AES密钥"
                    />
                    <template #extra>
                        <div class="text-xs py-2">
                            微信测试账号AES密钥非必填
                        </div>
                    </template>
                </a-form-item>

                <a-form-item field="app_callback_url" label="应用回调URL">
                    <a-input
                        v-model.trim="form.app_callback_url"
                        :style="{ width: '520px' }"
                        allow-clear
                        placeholder="请输入应用回调URL"
                    />
                </a-form-item>

                <a-form-item field="use_stable_access_token" label="是否使用稳定的访问令牌">
                    <a-radio-group v-model="form.use_stable_access_token">
                        <a-radio :value="true">开启</a-radio>
                        <a-radio :value="false">关闭</a-radio>
                    </a-radio-group>
                </a-form-item>

                <a-form-item class="mt-10">
                    <a-button html-type="submit" type="primary"> 提交保存</a-button>
                </a-form-item>
            </a-form>
        </a-card>
    </app-page>
</template>

<style lang="scss" scoped>
.custom-divider{
    border-bottom: 1px solid var(--color-neutral-4);
    :deep(.arco-divider-text){
        font-size: 18px;
        font-weight: bold;
    }
}
</style>
